<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <!-- <iframe src="http://www.baidu.com" frameborder="0"></iframe> -->
    <h1 id="outerH1">outer</h1>
    <iframe id="frame1" src="iframe_inner.html" frameborder="1"></iframe>

    <button id="setH1Btn">set inner H1</button>

    <script src="js/helper.js"></script>

    <script>
        var setH1Btn = Helper.dom('setH1Btn');
        var outerH1 = Helper.dom('outerH1');
        var frame1 = Helper.dom('frame1');
//      var innerH1 = Helper.dom('innerH1'); // ?????
        setH1Btn.onclick = function() {
            var cWindow = frame1.contentWindow;
            var cDocument = cWindow.document;
            var innerH1 = cDocument.getElementById('innerH1');
            innerH1.innerHTML = "888";
            cWindow.inner();
//          console.log(frame1.contentWindow.document);
        };
        function ptest() {
            alert('form outer...');
        }
        ////////////////////////////////////////////////////////////////
//      var setH1Btn = document.getElementById('setH1Btn');
//      setH1Btn.onclick = function() {
//          /*var myH1 = document.getElementById('myH1');
//          myH1.innerHTML = "Hello wbc";*/
//
//          var frame1 = document.getElementById('frame1');
//          var cWin = frame1.contentWindow;
//          var myH1 = cWin.document.getElementById('myH1');
//          myH1.innerHTML = "Hello wbc";
//
//          cWin.hello();
//
//          // console.log(frame1.contentWindow.document.getElementById('myH1'));
//      };
//      function hello2() {
//          alert('hello2');
//      }
        // $('#frame1').contents().find('#myH1').html('hello wbc2');
    </script>
    
</body>
</html>